<template>
	<view>
		<bg-video></bg-video>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">我的押金</block>
		</cu-custom>
		<view>
			<view class="padding-left padding-right text-blue">
				【提醒】：在您申请退押金之后的1-2个工作日，押金会返还到您的支付账户。
			</view>
			<view class="bg-white margin">
				<view class="padding text-lg solid-bottom flex justify-between">
					<text>押金充值记录</text>
					<text v-if="showNewFlg" @tap="payDesposits" class="cuIcon-add text-blue">充值</text>
					<text v-else class="cuIcon-recharge text-blue">{{formatAmount(account.depositAmount /100)}}</text>
				</view>
				<view v-if="depositRecords.length == 0" class="flex justify-center padding">
					<text class="text-gray text-center flex align-center">暂无记录</text>
				</view>
				<view class="padding solid-bottom" v-for="(item, index) in depositRecords" :key="index">
					<view>
						<view>
							<text class="cuIcon-time">{{item.ct}}</text>
						</view>
						<view class="flex justify-between margin-top">
							<text class="cu-tag bg-white text-lg">
								<text v-if="paymentRecords[item.depositId+''].payFlg">
									<text v-if="item.statu === null">
										可申请退款
									</text>
									<text v-if="item.statu === 'REQ'">
										已申请退款
									</text>
									<text v-if="item.statu === 'REJ'">
										已驳回退款
									</text>
									<text v-if="item.statu === 'BCK'">
										已退款
									</text>
									<text v-if="item.statu === 'APP'">
										押金已扣除
									</text>
								</text>
								<text v-else>支付前不能退款</text>
							</text>
							<text @tap="toDepositRecord(item.depositId)" class="cu-tag bg-white text-lg">
								<text v-if="paymentRecords[item.depositId+''].payFlg"
									class="cuIcon-recharge text-red">{{formatAmount(item.amount / 100)}}</text>
								<text v-else>待支付</text>
								<text class="cuIcon-right"></text>
							</text>
						</view>
					</view>
				</view>
			</view>

			<!-- <view class="bg-white margin">
				<view class="padding text-lg solid-bottom flex justify-between">
					<text>押金退还申请记录</text>
					<text v-if="isShowNewReq" @tap="backRequestDesposit" class="cuIcon-add text-blue">申请</text>
				</view>
				<view v-if="depositBackRequests.length == 0" class="flex justify-center padding">
					<text class="text-gray text-center flex align-center">暂无记录</text>
				</view>
				<view @tap="toDepositBackRequest(item.backId)"
					class="padding solid-bottom flex justify-between align-center" 
					v-for="(item, index) in depositBackRequests" :key="index">
					<text class="cuIcon-time">{{item.ct}}</text>
					<text class="cu-tag bg-yellow round text-white" v-if="item.statu === 'REQ'">已申请</text>
					<text v-if="item.statu === 'REJ'" class="cu-tag bg-red text-white round">已驳回</text>
					<text v-if="item.statu === 'BAC'" class="cu-tag bg-green text-white round">已退还</text>
					<text>
						<text class="cuIcon-recharge text-red">{{formatAmount(item.amount / 100)}}</text>
						<text class="cuIcon-right"></text>
					</text>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
		    return {
				amount: 50000,
				data:{amount: 50000}
				
		    }
		},
		computed: {
			isShowNewReq: function() {
				let flg = true;
				for (let index in this.depositBackRequests) {
					let item = this.depositBackRequests[index];
					if (item.statu === 'REQ') {
						flg = false;
					}
				}
				return this.account.depositAmount > 0 && flg;
			}
		},
		onLoad: function() {
			this.state = this.common.getState();
			

		},
		onShow: function() {
			this.getDeposit();
			this.state = this.common.getState();
			this.init();
		},
		data: function() {
			return {
				showNewFlg: true,
				state: {},
				account: {},
				depositRecords: [],
				paymentRecords: {},
				depositBackRequests: []
			};
		},
		methods: {
			payDesposits: function() {
				let self = this;
				uni.showModal({
					title: '发起支付',
					content: `支付押金人民币${self.amount/100}元`,
					success: function(res) {
						console.log(self.amount)
						if (res.confirm) {
							self.http.post({
								url: "/client/deposit-record/info",
								param: {
									storeId: self.state.autor.store_client.storeId,
									clientId: self.state.autor.store_client.clientId,
									openId: self.state.autor.store_client.openId,
									amount: self.amount,
								}
							}).then(function(data) {
								self.pay.exePay(data.tokenJSAPI).then(res => {
									self.init();
								});
							});
						} else if (res.cancel) {
							self.init();
						}

					}
				});
			},
			formatAmount: function(amount) {
				return this.common.parseMoney(amount);
			},
			backRequestDesposit: function() {
				let self = this;
				uni.showModal({
					title: '申请',
					content: '即将发起押金返还申请，确认吗？',
					success: function(res) {
						if (res.confirm) {
							self.http.post({
								url: "/client/deposit-back-request/info",
								param: {
									reason: "押金退还"
								}
							}).then(function(res) {
								self.message.info("申请成功");
								self.init();
							});
						} else if (res.cancel) {}

					}
				});
			},
			toDepositBackRequest: function(backId) {
				uni.navigateTo({
					url: "../pages/depositBack?backId=" + backId
				});
			},
			toDepositRecord: function(depositId) {
				uni.navigateTo({
					url: "../pages/depositRecord?depositId=" + depositId,

				});
			},
			init: function() {
				let self = this;
				this.http.get({
					url: "/client/client-deposit/info/v2"
				}).then(function(res) {
					console.log(res);
					self.account = res.account;
					self.depositRecords = res.deposit_record;
					self.depositBackRequests = res.deposit_back_request;
					self.paymentRecords = res.payment_record;


					if (self.account.depositAmount === 0) {
						for (let index in self.paymentRecords) {
							let pr = self.paymentRecords[index];
							if (!pr.payFlg) {
								self.showNewFlg = false;
								return;
							}
						}
					} else {
						self.showNewFlg = false;
					}
				});
			},
			getDeposit: function () {
			    this.http.get({
			        url: "/client/deposit/info",
					param:{
					}
			    }).then(data => {
			        this.amount = data;
			    });
			}
		}
	}
</script>

<style>
</style>
